<template>
	<view class="page">
		<view style="background-color:#f3f5f7;">
			<u-navbar :is-back="true" :custom-back="goBack" title="白名单列表" back-text=''>
				<view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;">
					<!-- <text style="margin-right: 10px; color: #02AF74;" @click="order">查看订单</text> -->
				</view>
			</u-navbar>
			<view v-if="whiteList.length<=0&&!isLoading" class="content" style="text-align: center;height: 100%;width: 100%;margin: 0;padding: 15px 0;">
				<text>暂无白名单数据</text>
			</view>
			<view v-else v-for="(item,index) in whiteList" :key="index" class="content" style="text-align: center;" @click="redact(item)">
				<view class="title" style="border-bottom: 1px solid #f3f4f7;">
					<view class="">
						<u-icon name="bookmark" color="#02AF74"></u-icon>
						<text style="margin-right: 15px;">{{item.branchName}}</text>
					</view>
					<text>{{item.status=='START'?'开启':'关闭'}}</text>
				</view>
				<view class="details">
					<view class="">
						<text>最大成员数量</text>
						<text>{{item.amount}}</text>
					</view>
					<view class="">
						<text>计费</text>
						<text>
							<text>{{item.freeTime}}</text>次每天
							<text style="margin-left: 10rpx;">{{item.freeCount}}</text>小时每次</text>
					</view>
					<view class="">
						<u-button @click="seeMember(item)" type="success" size="mini" :plain="true">查看成员</u-button>
					</view>
				</view>
			</view>
			<view class="button">
				<u-button type="success" style="border-radius: 0;" @click="addList">添加白名单</u-button>
			</view>
		</view>
	</view>
</template>

<script lang="js">
	import {
		findShopWhiteList
	} from '../../utils/uniApi.ts'
	export default {
		props: {
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		},
		data() {
			return {
				isLoading: false, //是否加载中
				whiteList:[],//白名单list
				shopId:'',//商户id
			};
		},
		onLoad(options) {//页面跳转传参数
			if (options.shopid) {
				this.shopId = options.shopid
				uni.setStorage({
					key: "whiteListShopId",
					data: this.shopId,
					success: function() {},
				});
			} else {
				this.shopId = uni.getStorageSync("whiteListShopId");
			}
		},
		onShow(){
			this.getwhiteList()
		},
		onHide(){
			uni.hideLoading();
		},
		methods: {
			//下拉刷新
			onPullDownRefresh() {
			    setTimeout(function () {
			      uni.redirectTo({
			        url: "../../pages/whiteList/index",
			      });
			      uni.stopPullDownRefresh();
			    }, 1000);
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			addList() {
				var dic = {item:{},id:this.shopId,isEdit:false}
				uni.navigateTo({
					url: "./whiteList?white="+ encodeURIComponent(JSON.stringify(dic))
				});
			},
			//跳转到编辑白名单页面
			redact(item){
				var dic = {item:item,id:this.shopId,isEdit:true}
				uni.navigateTo({
					url: "./whiteList?white="+ encodeURIComponent(JSON.stringify(dic))
				});
			},
			//查询商户下的白名单列表
			getwhiteList(){
				this.isLoading = true
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					shopId: this.shopId, //商户ID
				};
				findShopWhiteList(params).then((res) => {    
					this.isLoading = false
					uni.hideLoading();
					if (res.data.code == 200) {
						this.whiteList = res.data.data
					} else {
						uni.showToast({
							title: '数据加载失败',
							icon: 'none',
							duration: 2000                         
						});
					}
				});
			},
			//查看成员
			seeMember(item){
				uni.navigateTo({
					url: "./checkOrder?white="+ encodeURIComponent(JSON.stringify(item)),
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		// position: fixed;
		// top: 0;
		// left: 0;
		// right: 0;
		// bottom: 0;
		background-color: #F3F5F7;
		height: 100%;
		// z-index: -1;
	}

	.button {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.content {

		.title,
		.details>view {
			display: flex;
			justify-content: space-between;
			padding: 0.5rem 1rem;
		}

		margin: 0.5rem;
		border-radius: 10px;
		background-color: #fff;
	}

	/deep/.u-btn--success--plain[data-v-6e15e680] {
		background-color: #fff !important;
	}
</style>
